import * as echarts from 'echarts'
import store from '@/store'
export function echartsLeftXia() {
  var chartDom1 = document.querySelector('.echartsLeftTwo')
  myChart1 = echarts.init(chartDom1)
  var option
  option = {
    backgroundColor: '#2e3032',
    color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#FFCC99', '#4772EB'],
    title: {
      text: '星云地产经纪分布',
      left: '60',
      top: 0,
      textAlign: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 700
      }
    },
    grid: {
      left: -100,
      top: 50,
      bottom: 10,
      right: 10,
      containLabel: true
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vartical',
      // x: "right",
      top: 'center',
      right: '15',
      // bottom: "0%",
      itemWidth: 16,
      itemHeight: 8,
      itemGap: 16,
      left: 20,
      textStyle: {
        color: '#A3E2F4',
        fontSize: 12,
        fontWeight: 0
      },
      data: JSON.parse(localStorage.getItem('namData')) || [...store.state.echarts.nameData]
    },
    polar: {},
    angleAxis: {
      interval: 1,
      type: 'category',
      data: [],
      z: 10,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#0B4A6B',
          width: 1,
          type: 'solid'
        }
      },
      axisLabel: {
        interval: 0,
        show: true,
        color: '#0B4A6B',
        margin: 8,
        fontSize: 16
      }
    },
    radiusAxis: {
      min: 40,
      max: 120,
      interval: 20,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#0B3E5E',
          width: 1,
          type: 'solid'
        }
      },
      axisLabel: {
        formatter: '{value} %',
        show: false,
        padding: [0, 0, 20, 0],
        color: '#0B3E5E',
        fontSize: 16
      },
      splitLine: {
        lineStyle: {
          color: '#0B3E5E',
          width: 2,
          type: 'solid'
        }
      }
    },
    calculable: true,
    series: [{
      type: 'pie',
      radius: ['5%', '10%'],
      hoverAnimation: false,
      labelLine: {
        normal: {
          show: false,
          length: 30,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      data: [{
        name: '',
        value: 0,
        itemStyle: {
          normal: {
            color: '#0B4A6B'
          }
        }
      }]
    }, {
      type: 'pie',
      radius: ['90%', '95%'],
      hoverAnimation: false,
      labelLine: {
        normal: {
          show: false,
          length: 30,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      name: '',
      data: [{
        name: '',
        value: 0,
        itemStyle: {
          normal: {
            color: '#013A54'
          }
        }
      }]
    }, {
      stack: 'a',
      type: 'pie',
      radius: ['20%', '80%'],
      roseType: 'area',
      zlevel: 10,
      label: {
        normal: {
          show: true,
          formatter: '{c}',
          textStyle: {
            fontSize: 12
          },
          position: 'outside'
        },
        emphasis: {
          show: true
        }
      },
      labelLine: {
        normal: {
          show: true,
          length: 20,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      data: JSON.parse(localStorage.getItem('agData')) || [...store.state.echarts.agData]
    }]
  }
  myChart1.setOption(option)

  // 图形宽度随屏幕宽度改变而改变
  // 图形宽度随屏幕宽度改变而改变
  // var chartcontent = document.querySelector('.echartsLeftTwo')
  // if (chartcontent !== null) {
  //   window.addEventListener('resize', function() {
  //     console.log(chartcontent, 3)
  //     myChart1.resize()
  //   })
  // } else {
  //   window.removeEventListener('resize', function() {
  //     console.log(chartcontent, 3)
  //   })
  // }
}
export var myChart1
